<template>
	<div class="mainWrapper">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-diaodu fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>调度中心</el-breadcrumb-item>
			<el-breadcrumb-item>订单列表</el-breadcrumb-item>
		</el-breadcrumb>

		<div class="content_Box box-shadow">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="4">
						<el-button type="success" @click="goToAdd()" round size="mini">店铺下单</el-button>
						<el-button type="default" @click="downloadOrder()" round size="mini">导出</el-button>
					</el-col>
					<el-col :span="20">
						<el-form :inline="true" :model="ruleForm" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item>
								<el-input size="mini" class="w_120" v-model="sn" placeholder="订单编号"></el-input>
							</el-form-item>
							<el-form-item class="mt">
								<el-cascader
									v-model="type_arr"
									:options="TypeArr"
									:props="optionProps"
									placeholder="请选择岗位"
									clearable
									@change="changeBtndialogtype"
								></el-cascader>
							</el-form-item>
							<el-form-item>
								<el-autocomplete
									size="mini"
									class="w_190"
									v-model="shop_name"
									:fetch-suggestions="querySearch"
									placeholder="店铺名称"
									:trigger-on-focus="true"
									@select="handleSelect"
								></el-autocomplete>
							</el-form-item>
							<!-- 代理商 -->
							<lh-agent-list @sendValue="setValue" :reset="agent_reset"></lh-agent-list>

							<el-form-item>
								<el-select class="w_110" v-model="city_val" placeholder="请选择城市" @change="changeCity">
									<el-option
										v-for="item in cityList"
										:key="item.id"
										:label="item.name"
										:value="`${item.id}|${item.name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-select v-model="area_arr" multiple collapse-tags placeholder="商圈">
									<el-button
										size="mini"
										type="primary"
										class="round-right all-area"
										@click="selectAllArea()"
										native-type="button"
										>{{ areaStatus ? '全选' : '取消全选' }}</el-button
									>
									<el-option
										v-for="item in areaList"
										:key="item.id"
										:label="item.area_name"
										:value="`${item.id}|${item.area_name}`"
									></el-option>
								</el-select>
							</el-form-item>

							<el-form-item>
								<el-select size="mini" class="w_100" v-model="flow_path" placeholder="订单类型" clearable>
									<el-option label="平台调度" value="1"></el-option>
									<el-option label="商户调度" value="2"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item>
								<el-select size="mini" class="w_80" v-model="status" placeholder="状态">
									<el-option label="全部" value></el-option>
									<el-option label="已创建" value="10"></el-option>
									<el-option label="已发布" value="20"></el-option>
									<el-option label="已确认" value="30"></el-option>
									<el-option label="进行中" value="40"></el-option>
									<el-option label="已结束" value="50"></el-option>
									<el-option label="已取消" value="60"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item>
								<el-select size="mini" class="w_120" v-model="time_type" placeholder="用工开始时间">
									<el-option label="用工开始时间" value="1"></el-option>
									<el-option label="用工结束时间" value="2"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item prop="datetime1">
								<el-date-picker
									size="mini"
									class="w_160i"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm"
									format="yyyy-MM-dd HH:mm"
									placeholder="开始时间"
									v-model="ruleForm.date1"
								></el-date-picker> </el-form-item
							>~
							<el-form-item prop="datetime2">
								<el-date-picker
									size="mini"
									class="w_160i"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm"
									format="yyyy-MM-dd HH:mm"
									placeholder="结束时间"
									v-model="ruleForm.date2"
								></el-date-picker>
							</el-form-item>
							<el-button size="mini" type="primary" class="round-right" native-type="button" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>

			<div class="tableMaxBox">
				<template>
					<!-- 表格部分 -->
					<el-table :data="demandList" stripe>
						<el-table-column prop="sn" label="订单编号" width="120">
							<template slot-scope="{ row }">
								<el-link type="primary" @click="goToMore(row)">{{ row.sn }}</el-link>
							</template>
						</el-table-column>
						<el-table-column prop="shop_name" label="店铺名称" width="200">
							<template slot-scope="{ row }">
								<el-link type="primary" @click="goShopCont(row)">{{ row.shop_name }}</el-link>
							</template>
						</el-table-column>
						<el-table-column prop="city_name" label="城市" width="70"></el-table-column>
						<el-table-column prop="area_name" label="商圈" width="80"></el-table-column>
						<el-table-column prop="label_name" label="岗位" width="80">
							<template slot-scope="{ row }">
								<el-tooltip effect="light" placement="top" :open-delay="500">
									<div slot="content">
										<div style="margin-bottom: 20px;">
											<span class="mr_10 mb_20">{{ user_historySD.week }}</span>
											<span class="mr_10 mb_20"
												>已发人数：<span style="color: red;">{{ user_historySD.person }}</span
												>/{{ user_historySD.person_sum }}</span
											>
										</div>
										<div style="margin-bottom: 20px;" v-for="(item, index) in user_historySD.demandList" :key="index">
											<span class="mr_10 mb_20"
												>{{ item.start_time | ReversalTime }}-{{
													(Number(item.start_time) + Number(item.hours)) | ReversalTime
												}}</span
											>
											<span class="mr_10 mb_20" style="color: var(--blue1); text-decoration: underline;"
												>{{ item.person_num }}人</span
											>
											<span class="mb_20">
												{{ item.status }}
												<span class="mb_20" style="color: var(--blue1);" v-if="item.is_this == true">（当前）</span>
											</span>
										</div>
										<div style="margin-bottom: 10px;">
											<span class="mr_10 mb_20">服务员用工频率：</span>
										</div>
										<div style="margin-bottom: 20px;" v-for="(item, index) in preset" :key="index + '-only'">
											<span class="mr_10 mb_20">{{ item.name }}</span>
											<span class="mr_10 mb_20" v-for="itemnext in item.arr" :key="itemnext.id"
												>{{ itemnext.start_time }}-{{ itemnext.end_time }}&nbsp;&nbsp;&nbsp;&nbsp;{{
													itemnext.person_num
												}}人；</span
											>
										</div>
									</div>

									<div @mouseover="cellMouseEnterSD(row)" @mouseout="cellMouseEnterSDLeave">
										<div>
											<h4 style="cursor: pointer; color: var(--blue1); text-decoration: underline;">
												<!-- {{ row.label_name }} {{ row.hours }}h {{ row.period }}d -->
												{{ row.label_name }}
											</h4>
										</div>
									</div>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column prop="start_date" label="用工开始/结束时间" width="200px">
							<template slot-scope="{ row }">
								<span
									>{{ row.start_date }} {{ row.start_time | ReversalTime }} ~
									{{ (row.start_time + row.hours) | ReversalTime }}</span
								>
							</template>
						</el-table-column>
						<el-table-column prop="area_name" label="时长" width="60">
							<template slot-scope="{ row }">
								<span>{{ row.hours }}h</span>
							</template>
						</el-table-column>
						<el-table-column prop="area_name" label="商户单价" width="70">
							<template slot-scope="{ row }">
								<span>{{ row.price_b }}元</span>
							</template>
						</el-table-column>
						<!-- <el-table-column prop="person_num" label="任务数" align="center">
							<template slot-scope="{ row }">
								<span
									class="pointer u text-primary"
									v-if="row.status != '10' && row.status != '20'"
									@click="totaskList(row)"
									>{{ row.period * row.person_num }}</span
								>
								<span class="pointer u text-primary" v-else>/</span>
							</template>
						</el-table-column> -->
						<!-- <el-table-column prop="start_date" label="用工结束时间" width="150px">
							<template slot-scope="{ row }">
								<span>{{ row.end_date }} {{ (row.start_time + row.hours) | ReversalTime }}</span>
							</template>
						</el-table-column> -->
						<el-table-column prop="person_num" label="人数" width="50"></el-table-column>
						<el-table-column prop="total" label="订单金额" width="70">
							<template slot-scope="{ row }">
								<span>{{ row.total | filterNumber }}</span>
							</template>
						</el-table-column>
						<!-- 订单类型 - flow_path -->
						<el-table-column prop="flow_path" label="订单类型">
							<template slot-scope="{ row }">
								<span class="text-info" v-if="row.flow_path == '1'">平台调度</span>
								<span class="text-primary" v-if="row.flow_path == '2'">商户调度</span>
							</template>
						</el-table-column>
						<el-table-column prop="status" label="状态">
							<template slot-scope="{ row }">
								<span class="text-info" v-if="row.status == '10'">已创建</span>
								<span class="text-info" v-if="row.status == '20'">已发布</span>
								<span class="text-primary" v-if="row.status == '30'">已确认</span>
								<span class="text-success" v-if="row.status == '40'">进行中</span>
								<span class="text-success" v-if="row.status == '50'">已结束</span>
								<span class="text-gray" v-if="row.status == '60'">已取消</span>
							</template>
						</el-table-column>
						<el-table-column prop="status" label="支付状态">
							<template slot-scope="{ row }">
								<span>{{ row.pay_status_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="status" label="支付方式">
							<template slot-scope="{ row }">
								<span>{{ row.pay_way }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="pay_money" label="支付金额" width="70">
							<template slot-scope="{ row }">
								<div v-if="+row.pay_money_to.length == 0">
									<span>{{ row.pay_money | filterNumber }}</span>
								</div>
								<div v-if="+row.pay_money_to.length != 0">
									<span v-for="(item, index) in row.pay_money_to" :key="index">{{ item }}</span>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="refund_money" label="退款金额" width="70">
							<template slot-scope="{ row }">
								<span>{{ row.refund_money | filterNumber }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="add_time" label="创建时间" width="150px"></el-table-column>
						<el-table-column prop="creater_name" label="创建人" width="100px"></el-table-column>
						<el-table-column label="操作" width="130" fixed="right">
							<!-- <template slot-scope="{ row }"> -->
							<template slot-scope="{ row, $index }">
								<el-link :underline="false" type="info" @click="goToMore(row, $index)">详情</el-link>
								<el-link
									:underline="false"
									type="primary"
									@click="goToTag(row)"
									v-if="row.status == 10 || row.status == 20"
									>修改</el-link
								>
								<el-link :underline="false" type="success" @click="redactBtnqr(row, $index)" v-if="row.status == 20"
									>确认</el-link
								>
								<el-link :underline="false" type="danger" @click="redactBtnqx(row, $index)" v-if="row.status == 20"
									>取消</el-link
								>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>

		<!-- 确认需求-开启弹框 -->
		<el-dialog :title="diaTitle" :visible.sync="StateShowStart" width="560px" :close-on-click-modal="false">
			<div class="auditCentent">
				<div class="row-info clear">
					<div class="fl title-key">
						<i class="lhadmin"></i>
						<span>岗位：</span>
					</div>
					<div class="fl list-cont">
						<el-input v-model="ids_name" disabled></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">状态：</div>
					<div class="fl list-cont">
						<el-radio>确认接单</el-radio>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="addMenuBtn">确 定</span>
				<span class="resetBtn" @click="hiddenRY">取 消</span>
			</div>
		</el-dialog>
		<!-- 需求状态-弹框 -->
		<el-dialog :title="diaTitle" :visible.sync="StateShowStop" width="560px" :close-on-click-modal="false">
			<div class="auditCentent">
				<div class="row-info clear">
					<div class="fl title-key">
						<i class="lhadmin"></i>
						<span>岗位：</span>
					</div>
					<div class="fl list-cont">
						<el-input v-model="ids_name" disabled></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">状态：</div>
					<div class="fl list-cont">
						<el-radio>取消需求</el-radio>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">原因：</div>
					<div class="fl list-cont">
						<el-input type="textarea" :rows="4" :cols="32" v-model="text"></el-input>
					</div>
				</div>
			</div>
			<div style="color: #d9001b; margin: 20px 0 0 45px;">
				注意：任务取消后会将任务金额原路退回给商户
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="addMenuBtn2">确 定</span>
				<span class="resetBtn" @click="StateShowStop = false">取 消</span>
			</div>
		</el-dialog>
		<!-- 需求状态-弹框 -->
		<el-dialog :title="diaTitle" :visible.sync="StateShowdel" width="560px" :close-on-click-modal="false">
			<div class="auditCentent">
				<span>删除账号后，账号将无法正常登录客户端平台</span>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="addMenuBtn(3)">确 定</span>
				<span class="resetBtn" @click="StateShowdel = false">取 消</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { publicData } from '../../../assets/js/data.js'
import { fetchIndustryJob } from '@/api/label.js'
import { fetchDemandList, fetchAreaList, fetchShopList } from '@/api/shop.js'

export default {
	name: 'ShopList',
	data() {
		return {
			id: '',
			dataMes: '',
			ids: '',
			id_id: '',
			ids_name: '',
			agreement: '',
			index: '',
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,
			//搜索对应值
			sn: '', //订单编号
			type_arr: '', //需求信息
			label_id: '', //
			label_name: '',
			shop_id: '', //店铺id
			shop_name: '', //店铺名
			// status: '20',
			status: '',
			flow_path: '1',
			time_type: '1', //用工开始时间,用工结束时间
			ruleForm: {
				date1: '', //开始时间
				date2: '' //结束时间
			},

			TypeArr: [],
			demandList: [], //店铺列表
			diaTitle: '', //弹框title
			StateShowStop: false, //人员状态-弹框关闭
			StateShowStart: false, //人员状态-弹框关闭
			PersonnelAudit: false, //审核状态弹框
			PersonnelXieYi: false, //协议弹框
			StateShowdel: false, //删除弹框
			//向分页组件传值
			total: 0,
			pageNum: 1,
			pageSizeNow: 20,
			// 审核状态
			text: '',
			// areaList: [], //区域列表
			shopList: [], //店铺列表
			user_historySD: [], //需求监控详细
			preset: [
				{
					id: 1,
					name: '周一',
					arr: []
				},
				{
					id: 2,
					name: '周二',
					arr: []
				},
				{
					id: 3,
					name: '周三',
					arr: []
				},
				{
					id: 4,
					name: '周四',
					arr: []
				},
				{
					id: 5,
					name: '周五',
					arr: []
				},
				{
					id: 6,
					name: '周六',
					arr: []
				},
				{
					id: 7,
					name: '周天',
					arr: []
				}
			],
			cityList: [], //城市列表
			city_arr: '',
			city_name: '',
			city_val: '',
			areaList: [], //区域列表
			area_arr: '', //商圈信息
			area_id: '',
			area_name: '',
			areaStatus: true,
			agent_id: '',
			agent_reset: 0,
			optionProps: {
				value: 'id',
				label: 'label_name'
			}
		}
	},
	created() {
		if (this.$route.query.id) {
			this.id = this.$route.query.id //接收传参
			this.business_id = this.id
		}

		if (this.$route.query.shop_id) {
			this.shop_id = this.$route.query.shop_id //接收传参
			this.shop_name = this.$route.query.shop_name
		}

		if (!sessionStorage.getItem('manageInfo')) {
			// 判断是否登录
			window.location = 'login.html'
			return
		}

		//时间的默认选中
		var d = this.date(-7)
		this.ruleForm.date1 = d + ' 00:00:00'
		var e = this.date(3)
		this.ruleForm.date2 = e + ' 23:59:00'

		this.selectedAreasMap = {}
	},
	// computed: {
	// 	city_value() {
	// 		return this.city_val
	// 	}
	// },
	watch: {
		//商圈改变
		areaList(newValue, oldValue) {
			this.listShop()
		}
		// 城市改变
		// city_value(newVal, oldVal) {
		// if (oldVal) {
		// 	let [id, name] = oldVal.split('|')
		// 	if (id === '北京') {
		// 		id = 1
		// 	}
		// 	// 存储旧的商圈数据
		// 	this.selectedAreasMap[`city-${id}`] = this.area_arr
		// }
		// console.log('存储值', this.selectedAreasMap)
		// if (newVal && this.city_id) {
		// 	this.fetchAreaList(this.city_id) //商圈列表
		// 	this.listUser(this.city_id) //店铺列表
		// }
		// }
	},
	mounted() {
		//this.alljob_type()
	},
	methods: {
		async setValue(data) {
			this.agent_id = data.agent_id

			// 店铺信息重置
			this.shop_id = this.$route.query.shop_id || ''
			this.shop_name = this.$route.query.shop_name || ''

			this.cityList = data.city_list
			if (this.cityList.length > 0) {
				this.city_val = this.cityList[0].name
				this.city_id = this.cityList[0].id
			}
			await this.fetchAreaList(this.city_id) //商圈列表
			this.listUser() //店铺列表
			this.alljob_type()
		},

		date(e) {
			return this.$moment().add('days', e).format('YYYY-MM-DD')
		},

		async listUser() {
			try {
				let ret = await fetchShopList({
					sign_status: 30, //已合作的店铺
					status: 1, //启用的店铺
					city_id: this.city_id,
					agent_id: this.agent_id
				})
				if (ret.list.length) {
					ret.list.forEach(item => {
						item.value = item.name
					})
					this.shopList = ret.list
				} else {
					this.shopList = []
				}
			} catch (err) {
				console.log(err)
			}
		},
		//获取需求列表
		async listShop() {
			try {
				if (!this.shop_name) {
					this.shop_id = ''
				}
				if (!this.ruleForm.date1) {
					this.ruleForm.date1 = ''
				}
				if (!this.ruleForm.date2) {
					this.ruleForm.date2 = ''
				}

				let s_departmentIds_Arr = new Array()
				this.area_arr.forEach(element => {
					let [id, name] = element.split('|') // es6 数组解构赋值
					s_departmentIds_Arr.push(id.toString())
				})
				let ret = await fetchDemandList({
					pageSize: this.pageSizeNow,
					page: this.pageNum,
					shop_id: this.shop_id,
					area_id: '' + s_departmentIds_Arr,
					city_id: this.city_id,
					status: this.status,
					sn: this.sn,
					job_type: this.label_id,
					time_type: this.time_type,
					flow_path: +this.flow_path,
					start_time: this.ruleForm.date1,
					end_time: this.ruleForm.date2,
					agent_id: this.agent_id
				})

				if (ret.list.length) {
					ret.list.forEach(item => {
						if (+item.pay_money.toString().indexOf('/') == -1) {
							item.pay_money_to = []
						} else {
							var arr = item.pay_money.split('/')
							item.pay_money_to = arr.splice(0, arr.length - 1)
						}
					})
					this.demandList = ret.list
					this.total = ret.count
				} else {
					this.demandList = []
					this.total = 0
				}
			} catch (err) {
				console.log(err)
			}
		},

		shearchBtn() {
			// 搜索
			//判断时间框是否存在值
			if (!this.ruleForm.date1) {
				this.$message.error('请选择用工开始时间！')
				return
			}
			if (!this.ruleForm.date2) {
				this.$message.error('请选择用工结束时间！')
				return
			}
			this.pageNum = 1
			this.listShop()
		},

		resetBtn() {
			//重置
			this.resetData() //重置请求数据
			this.pageNum = 1
			this.listShop()
		},

		resetData() {
			//重置请求数据
			// this.shop_id = "";
			// this.area_id = "";
			// this.status = "";
			// this.sn = "";
			// this.label_id = "";
			this.sn = '' //订单编号
			this.type_arr = '' //需求信息
			this.label_id = '' //
			this.label_name = ''
			// this.area_arr = '' //商圈信息
			// this.area_id = ''
			// this.area_name = ''
			this.shop_id = '' //店铺id
			this.shop_name = '' //店铺名
			// this.status = '20'
			this.status = ''
			this.flow_path = '1'
			// this.ruleForm.date1 = "";
			// this.ruleForm.date2 = "";

			// 重置代理商
			this.agent_reset += 1
		},

		goToEdit(row) {
			//编辑页面
			this.$router.push({
				path: '/merchantsEdit',
				query: {
					id: row.id
				}
			})
		},

		goToTag(row) {
			//修改页面
			this.$router.push({
				path: '/roleAdd',
				query: {
					id: row.id
				}
			})
		},
		goToMore(row) {
			const { href } = this.$router.resolve({
				path: '/roleMainXq',
				query: { rl_id: row.id, rl_sn: row.sn, start_date: row.start_date }
			})
			window.open(href, '_blank')
		},
		// 跳转店铺详情
		goShopCont(row) {
			const { href } = this.$router.resolve({ path: '/shopTag', query: { id: row.shop_id } })
			window.open(href, '_blank')
		},
		// 跳转任务列表
		totaskList(row) {
			this.$router.push({
				path: '/tasklist',
				query: {
					rl_sn: row.sn
				}
			})
		},
		goToAdd() {
			//添加人员
			this.$router.push('/roleAdd')
		},

		//店铺的自动完成
		querySearch(queryString, cb) {
			var restaurants = this.shopList
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			console.log(item)
			this.shop_id = item.id
		},
		//确认状态
		redactBtnqr(e, index) {
			// console.log(e);
			// this.dataMes = e;
			this.ids = e.sn
			this.id_id = e.id
			this.ids_name = e.label_name
			this.text = ''
			this.index = index
			this.StateShowStart = true //去开启
			this.diaTitle = '需求确认'
		},

		// 取消状态
		redactBtnqx(e, index) {
			this.ids = e.sn
			this.id_id = e.id
			this.ids_name = e.label_name
			this.text = ''
			this.index = index
			this.StateShowStop = true //去关闭
			this.diaTitle = '取消需求'
		},

		//隐藏商户弹框
		hiddenRY() {
			this.StateShowStart = false
			this.StateShowStop = false
		},
		// 确定需求-弹框确认
		addMenuBtn(e) {
			let fn = new FormData()
			fn.append('id', this.id_id) //相关id
			fn.append('sn', this.ids) //相关sn

			this.$http.post(this.url + '/demand/accept', fn).then(
				res => {
					// console.log(res);
					if (res.data.msg == '操作成功!' || res.data.code == '200') {
						this.$message.success(res.data.msg)
						this.listShop()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)

			//关闭弹框
			this.StateShowStop = false
			this.StateShowStart = false
			this.StateShowdel = false
		},
		// 取消需求-弹框确认
		addMenuBtn2(e) {
			let fn = new FormData()
			fn.append('id', this.id_id) //相关id
			fn.append('sn', this.ids) //相关sn
			fn.append('remark', this.text)

			this.$http.post(this.url + '/demand/cancel', fn).then(
				res => {
					// console.log(res);
					if (res.data.msg == '操作成功!' || res.data.code == '200') {
						this.$message.success(res.data.msg)
						this.listShop()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)

			//关闭弹框
			this.StateShowStop = false
			this.StateShowStart = false
			this.StateShowdel = false
		},

		//审核店铺
		addMenuBtnQY() {
			let fn = new FormData()
			fn.append('id', this.ids) //相关id
			fn.append('sign_status', this.tag)
			fn.append('audit_name', this.manageInfo.username)
			fn.append('fail_reason', this.text)
			this.$http.post(this.url + '/shop/edit', fn).then(
				res => {
					// console.log(res);
					if (res.data.msg == '操作成功!' || res.data.code == '200') {
						this.$message.success(res.data.msg)
						this.PersonnelAudit = false //关闭弹框
						this.tag = '30'
						this.text = ''
						this.listShop()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
			this.PersonnelAudit = false //关闭弹框
		},
		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listShop()
		},
		//审核弹框
		goToPersonnelAudit(e) {
			this.ids = e.id
			this.PersonnelAudit = true
			this.diaTitle = '审核'
		},
		//协议弹框
		goToXieYi(e) {
			this.ids = e.id
			this.agreement = e.agreement
			this.PersonnelXieYi = true
			this.diaTitle = '协议'
		},
		//导出
		downloadOrder() {
			let s_departmentIds_Arr = new Array()
			this.area_arr.forEach(element => {
				let [id, name] = element.split('|') // es6 数组解构赋值
				s_departmentIds_Arr.push(id.toString())
			})

			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				shop_id: this.shop_id,
				area_id: '' + s_departmentIds_Arr,
				status: this.status,
				city_id: this.city_id,
				sn: this.sn,
				flow_path: this.flow_path,
				job_type: this.label_id,
				start_time: this.ruleForm.date1,
				end_time: this.ruleForm.date2
			}
			let param = $.param(obj)
			window.location.href = this.url + '/demand/export?' + param
		},
		changeBtndialogtype() {
			this.label_id = this.type_arr[1]
		},
		//标签接口
		async alljob_type() {
			this.type_arr = ''
			try {
				let ret = await fetchIndustryJob({
					city_id: this.city_id
				})
				if (ret.length > 0) {
					this.TypeArr = ret
				} else {
					this.TypeArr = []
				}
			} catch (err) {
				console.log(err)
			}
		},
		changeBtndialogarea(e) {
			if (!e) return
			let [id, name] = this.area_arr.split('|') // es6 数组解构赋值
			this.area_id = id.toString()
			this.area_name = name.toString()
		},

		// 监听城市val变化
		async changeCity() {
			let [id, name] = this.city_val.split('|') // es6 数组解构赋值
			this.city_id = id
			this.city_name = name
			// 店铺信息重置
			this.shop_id = ''
			this.shop_name = ''

			await this.fetchAreaList(this.city_id) //商圈列表
			this.listUser() //店铺列表
			this.alljob_type()
		},
		//获取商圈列表
		async fetchAreaList(city_id) {
			this.area_arr = []
			let fn = new FormData()
			fn.append('city_id', city_id)
			fn.append('agent_id', this.agent_id)
			this.$http.post(this.url + '/area/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.area_name
							})
							this.areaList = res.data.data.list
							// if (this.area_arr == '' || this.area_arr == null) {
							// 	// 默认选中非254-平谷的
							// 	this.areaList.forEach(element => {
							// 		// 平谷
							// 		if (element.area_name != '平谷' && element.id != 0) {
							// 			var pusharr = element.id + '|' + element.area_name
							// 			this.area_arr.push(pusharr)
							// 		}
							// 	})
							// }
							// if (this.selectedAreasMap[`city-${city_id}`] && this.selectedAreasMap[`city-${city_id}`].length) {
							// 	this.area_arr = this.selectedAreasMap[`city-${city_id}`]
							// }
						} else {
							this.areaList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		//进入单元行
		cellMouseEnterSD(row, column, cell, event) {
			console.log(row)
			publicData.isShowLoading = false
			// 请求人员资料信息
			let fn = new FormData()
			fn.append('demand_sn', row.sn)
			fn.append('shop_sn', row.shop_sn)
			fn.append('job_type', row.label_id)
			fn.append('date', row.start_date)
			fn.append('shop_id', row.shop_id)
			fn.append('source', 'demand')
			// setTimeout(()=>{
			this.$http.post(this.url + '/abnormal/listDemandMonitorInfo', fn).then(
				res => {
					if (res.data.msg == '操作成功！' || res.data.code == '200') {
						this.user_historySD = res.data.data
						this.preset[0].arr = res.data.data.preset.Monday || [] //周一
						this.preset[1].arr = res.data.data.preset.Tuesday || [] //周二
						this.preset[2].arr = res.data.data.preset.Wednesday || [] //周三
						this.preset[3].arr = res.data.data.preset.Thursday || [] //周四
						this.preset[4].arr = res.data.data.preset.Friday || [] //周五
						this.preset[5].arr = res.data.data.preset.Saturday || [] //周六
						this.preset[6].arr = res.data.data.preset.Sunday || [] //周天
					}
				},
				res => {}
			)
			// },300);
		},
		// 离开单元行
		cellMouseEnterSDLeave() {
			setTimeout(() => {
				publicData.isShowLoading = true
			}, 1000)
		},
		//全选-取消全选商圈
		selectAllArea() {
			let arr = []
			this.areaList.forEach(item => {
				arr.push(`${item.id}|${item.area_name}`)
			})
			if (this.areaStatus == true) {
				this.area_arr = arr
			} else {
				this.area_arr = []
			}
			this.areaStatus = !this.areaStatus
			// this.shearchBtn()
		}
	},
	filters: {
		ReversalTime: function (value) {
			value = value % 24
			return common.getReversalTime(value)
		}
	}
}
</script>

<style scoped>
.auditCentent .labels {
	min-height: 100px;
}
.auditCentent .labels .labels_label {
	float: left;
	cursor: pointer;
}
.check_label {
	background: var(--purple4);
	color: #fff;
	border: none;
}
.pdf {
	width: 860px;
	height: 600px;
}
.main_user {
	background: var(--zfy-red);
	color: #fff;
	text-decoration: none;
	padding: 2px 4px;
	border-radius: 4px;
}
.mt {
	margin-top: -4px;
}
</style>



// WEBPACK FOOTER //
// src/components/roledemand/List.vue